import React, { PureComponent } from "react";
import { CSSTransition } from "react-transition-group";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import {
  searchFocus,
  getList,
  mouseEnter,
  mouseLeave,
  changePage
} from "./store/actionCreators";
import {
  LOGIN_INFO
} from '../../page/login/store/constants'
import {
  HeaderWrpper,
  Logo,
  Nav,
  NavItem,
  SearchWrapper,
  NavSearch,
  Addition,
  Button,
  SearchInfo,
  SearchInfoTitle,
  SearchInfoSwitch,
  SearchInfoItem,
  SearchInfoList
} from "./style.js";
class Header extends PureComponent  {
  getListArea() {
    const { focused, list, page, handleEnter, handleLeave, mouseIn, handleChangePage } = this.props
    const newList = list.toJS()
    const pageList = []
    for (let index = (page - 1) * 10; index < page * 10; index++) {
      if (newList[index]) {
        pageList.push(
          <SearchInfoItem key={newList[index]}>{newList[index]}</SearchInfoItem>
        )
      }
    }
    if (focused || mouseIn) {
      return (
        <SearchInfo
          onMouseEnter={handleEnter}
          onMouseLeave={handleLeave}
          >
          <SearchInfoTitle>
            热门搜索
            <SearchInfoSwitch
              onClick={() => handleChangePage(this.spinIcon)}
            >
              <i ref={icon => this.spinIcon = icon} className="iconfont spin">&#xe851;</i>
              <span>换一批</span>
            </SearchInfoSwitch>
            <SearchInfoList>
              {pageList}
            </SearchInfoList>
          </SearchInfoTitle>
        </SearchInfo>
      )
    } else {
      return null
    }
  }
  render() {
    const { focused, handleChangeInput, list, login } = this.props
    return (
      <HeaderWrpper>
        <Link to='/'>
          <Logo></Logo>
        </Link>
        <Nav>
          <NavItem className="left active">首页</NavItem>
          <NavItem className="left">下载App</NavItem>
          <NavItem className="left">
            <SearchWrapper>
              <CSSTransition in={focused} timeout={200} classNames="slide">
                <NavSearch
                  className={focused ? "focused" : ""}
                  onFocus={() => handleChangeInput(list)}
                  onBlur={handleChangeInput}
                ></NavSearch>
              </CSSTransition>
              <i className={focused ? "focused iconfont zoom" : "iconfont zoom"}>
                &#xe614;
              </i>
            {
              this.getListArea()
            }
            </SearchWrapper>
          </NavItem>
          {
            login ? <NavItem className="right" onClick={this.props.logout}>退出</NavItem> : 
            <Link to='/login'>
              <NavItem className="right">登录</NavItem> 
            </Link>
          }
          
          <NavItem className="right">
            <i className="iconfont">&#xe636;</i>
          </NavItem>
        </Nav>
        <Addition>
          <Link to='/write'>
            <Button className="writing">
              <i className="iconfont">&#xe615;</i>
              <span>写文章</span>
            </Button>
          </Link>
          <Button className="reg">注册</Button>
        </Addition>
      </HeaderWrpper>
    )
  }
};
const mapStateToProps = (state) => {
  return {
    // focused: state.get('header').get('focused')
    focused: state.getIn(['header', 'focused']),
    list: state.getIn(['header', 'list']),
    page: state.getIn(['header', 'page']),
    mouseIn: state.getIn(['header', 'mouseIn']),
    login: state.getIn(['login', 'login'])
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    logout() {
      dispatch({
        type: LOGIN_INFO,
        login: false
      })
    },
    handleChangeInput(list) {
      if (list && list.size === 0) {
        dispatch(getList())
      }
      dispatch(searchFocus())
    },
    handleEnter() {
      dispatch(mouseEnter())
    },
    handleLeave() {
      dispatch(mouseLeave())
    },
    handleChangePage(el) {
      const originAngle = parseInt(el.style.transform.replace(/[^0-9]/ig, '') || 0, 10)
      el.style.transform = `rotate(${360 + originAngle}deg)`
      dispatch(changePage())
    }
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Header);
